<template>
	<view class="message-emitter-menu-container" v-if="msgType =='other'||msgType=='emoji'">
		<uni-transition mode-class="slide-bottom" :show="msgType == 'other'">
			<view class="other-message-menu-wrapper" v-if="msgType != 'emoji'">
				<!-- 照片 -->
				<view class="other-type-msg-item" @click="choosePhoto">
					<view class="message-type-icon-container">
						<image
							src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-8acfaa58-aeb5-4502-8309-365d4c6cca4a/d67f56ea-5a81-41e1-a154-1db2adfad228.png"
							class="message-type-icon" />
					</view>
					<view class="message-type-label">
						照片
					</view>
				</view>
				<!-- 位置 -->
				<view class="other-type-msg-item" @click="getLocation">
					<view class="message-type-icon-container">
						<image
							src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-8acfaa58-aeb5-4502-8309-365d4c6cca4a/cf87541b-2e4d-468e-bfdd-896c012bf9f5.png"
							class="message-type-icon" />
					</view>
					<view class="message-type-label">
						位置
					</view>
				</view>
				<!-- 视频 -->
				<view class="other-type-msg-item" @click="chooseVideo">
					<view class="message-type-icon-container">
						<image
							src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-8acfaa58-aeb5-4502-8309-365d4c6cca4a/248d7300-8bf3-41a5-8f9c-573b5854e659.png"
							class="message-type-icon" />
					</view>
					<view class="message-type-label">
						视频
					</view>
				</view>
				<!-- 文件 -->
				<!-- 				<lsj-upload ref="fileUpload" childId="fileUpload" :option="option" :instantly="instantly"
					@progress="onprogress" @change='changeFiles' :size="size" :count='1' :formats="formats"
					class="upload" :width="width" :height="height"> -->
				<view class="other-type-msg-item" @click="chooseFile">
					<view class="message-type-icon-container">
						<image
							src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-8acfaa58-aeb5-4502-8309-365d4c6cca4a/934e8caf-a34a-4ce9-a768-f95a8d74b7f6.png"
							class="message-type-icon" />
					</view>
					<view class="message-type-label">
						文件
					</view>
				</view>
				<!-- </lsj-upload> -->
			</view>
		</uni-transition>

		<uni-transition mode-class="slide-bottom" :show="msgType == 'emoji'">
			<view class="emoji-message-menu-wrapper" v-if="msgType != 'other'">
				<view class="emoji-item" v-for="(item,key,index) in emojiList.map" :key="index">
					<image :src="emojiPathSet(item)" class="emoji-img" @click="chooseEmoji(key)" />
				</view>
<!-- 				<view class="emoji-item" v-for="(item,key,index) in emojis" :key="index">
					<view class="emoji-img" :style="item.style" v-html="'<div></div>'">
						
					</view>
				</view> -->
			</view>
		</uni-transition>
		<u-modal v-model="isSendFileMsgModalShow" :title="title" :content='content' show-cancel-button
			@confirm="confirm" @cancel="cancel"></u-modal>
	</view>
</template>

<script>
	// const emojiParser = require("@/common/emoji-parser.esm.js");
	import arrowFileType from "./file_type.js";
	export default {
		props: {
			msgType: {
				type: String,
			}
		},
		mounted() {

			// emojiParser.configParseEmoji({
			// 	size: 30
			// })
			// console.log(this.emojis)
		},
		data() {
			return {
				// emojis: emojiParser.getEmojis({
				// 	size: 30
				// }),
				isSendFileMsgModalShow: false,
				title: '确认发送文件',
				content: '',
				emojiList: uni.WebIM.Emoji,
				// emojiList: {},
				option: {
					url: "https://www.gdlzjt.com/api/upload/uploadFileCos",
					header: {
						"UserToken": this.getTokenSync(),
						// "Content-Type": "application/pdf"
					},
					name: 'file',
					// 根据你接口需求自定义body参数
				},
				size: 100,
				debug: true,
				instantly: false,
				files: new Map(),
				formats: "zip,rar,7z,xlsx,xls,txt,pdf,doc,docx,ppt,pptx",
				width: '104rpx',
				height: '146rpx',
				progress: 0,
				uploadSuccessLength: 0,
			}
		},
		// beforeUpdate() {
		// 	// console.log('更新前',this.msgType)
		// 	this.$refs.fileUpload.hide();
		// },
		computed: {
			emojiPathSet() {
				return (path) => {
					return require("@/pages_chat/assets/emoji/" + path);
				}
			}
		},
		// watch: {
		// 	msgType: {
		// 		handler(val) {
		// 			if (val) {
		// 				console.log('显示文件上传')
		// 				this.$refs.fileUpload.show();
		// 			} else {
		// 				console.log('隐藏文件上传')
		// 				this.$refs.fileUpload.hide();
		// 			}
		// 		},
		// 	},
		// },
		methods: {
			chooseEmoji(emoji) {
				console.log(emoji)
				uni.$emit('chooseEmoji', emoji);
			},
			async choosePhoto() {
				await this.$wx.getPermission('scope.camera', '摄像头')
				uni.chooseImage({
					count: 6, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: (res) => {
						console.log(res);
						this.$emit('sendImageMessage', res.tempFilePaths);
					},
					fail: () => {}
				});
			},
			async getLocation() {
				await this.$wx.getPermission('scope.userLocation', '位置信息')
				console.log("1")
				uni.getLocation({
					type: 'gcj02',
					success: (res) => {
						console.log('当前位置的经度：' + res.longitude);
						console.log('当前位置的纬度：' + res.latitude);
						this.chooseArea(res.longitude, res.latitude);
					},
					fail: (err) => {
						console.log(err)
					}
				});
			},
			chooseArea(longitude, latitude) {
				uni.chooseLocation({
					longitude,
					latitude,
					success: (res) => {
						console.log(res)
						const {
							longitude,
							latitude,
							address,
							name
						} = res
						this.$emit('sendLocationMsg', {
							longitude,
							latitude,
							address,
							name
						})
					},
					fail: (err) => {
						console.log(err);

					}
				})
			},
			chooseVideo() {
				uni.chooseVideo({
					success: (res) => {
						console.log(res)
						if (res.size > 104857600) {
							return this.$showToast('视频不能超过100M')
						}
						this.$emit('sendVideoFileMsg', res);
					},
					fail: (err) => {}
				})
			},
			confirm() {
				this.$refs.fileUpload.upload();
				this.progress = 0;
				uni.showLoading({
					title: `文件正在上传中`,
					mask: true,
				})
				this.$emit('uploadFile', this.progress);
			},
			cancel() {
				this.$refs.fileUpload.clear();
			},
			changeFiles(files) {
				console.log(files)
				console.log([...files.values()])
				const file = [...files.values()][0];
				if (file.size == 0) {
					this.$refs.fileUpload.clear();
					return this.$showToast('请确认该文件是否存在')
				} else if ([...files.values()].length != 0) {
					this.content = `是否确认发送${file.name}文件`
					this.currentFile = file;
					this.isSendFileMsgModalShow = true;
				}
			},
			chooseFile() {
				// wx.chooseMessageFile({
				// 	count:1,
				// 	type:'file',
				// 	success:(res)=>{
				// 		console.log('选择文件成功',res);
				// 	},
				// 	fail:(err)=>{
				// 		console.log('选择文件失败',err);
				// 	}
				// })
				// uni.showActionSheet({
				// 	title:'选择文件的途径',
				// 	itemList:['从消息列表中选择文件','从文件系统中选择文件'],
				// })
				wx.chooseMessageFile({
					count: 5,
					type: 'file',
					extension: arrowFileType,
					success: async (res) => {
						console.log('选择文件成功', res);
						const fileList = res.tempFiles;
						let uploadSuccessLength = 0;
						for (let item of fileList) {
							console.log(item)
							uni.showLoading({
								title: `上传中，${uploadSuccessLength}/${fileList.length}`,
								mask: true,
							})
							const {
								file_url
							} = (await this.uploadFile(item.path, item.name)).data;
							this.$emit('sendFileMsg', {
								...item,
								file_url
							});
							uploadSuccessLength++;
							uni.hideLoading();
						}
					},
					fail: (err) => {
						console.log('选择文件失败', err);
					}
				})
			},
			uploadFile(filePath, fileName) {
				return new Promise((resolve, reject) => {
					const downloadTask = uni.uploadFile({
						url: 'https://www.gdlzjt.com/api/upload/uploadFileCos', //仅为示例，非真实的接口地址
						filePath,
						name: 'file',
						header: {
							"Content-Type": "multipart/form-data",
							// 'Content-Type': 'application/x-www-form-urlencoded',
							// Authorization: "Bearer " + token
							"UserToken": this.getTokenSync(),
						},
						success: (res) => {
							console.log('上传的文件>>>>>>>>>>>>>>>>>', res);
							const result = JSON.parse(res.data)
							if (result.status_code == 200) {
								resolve(result);
							} else {
								reject();
								uni.hideLoading();
								this.$showToast('上传文件失败');
							}
						},
						fail: () => {
							console.log(err);
							reject()
							uni.hideLoading();
							this.$showToast('上传文件失败');
						},
					});
					// downloadTask.onProgressUpdate((res) => {
					// 	console.log('下载进度' + res.progress);

					// });

				})

			},
			onprogress(e) {
				console.log(e)
				// const responseText = e['responseText'];
				let responseText;
				if (e['responseText']) {
					responseText = JSON.parse(e['responseText']);
				} else {
					responseText = null;
				}
				const {
					file,
					name,
					size,
					type,
					progress,
				} = e;
				// console.log('上传的进度',progress);
				this.progress = progress;
				this.$emit('uploadFile', this.progress);
				//当前文件还在上传中
				if (type == 'loading') {
					return
				} else if (type == 'success' && responseText && responseText.status_code == 200) {
					uni.hideLoading();
					this.$emit('sendFileMsg', {
						...responseText.data,
						size
					});
					this.$refs.fileUpload.clear();
					this.$emit('uploadFileEnd');
				} else {
					uni.hideLoading()
					this.$showToast('文件上传失败')
					this.$refs.fileUpload.clear();
					this.$emit('uploadFileEnd');
				}
			},

		}
	}
</script>

<style scoped lang="scss">
	@import "./selectMsgtypeMenu.scss";
</style>
